<template>
  <div>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 1000px; height: 900px"></div>
  </div>
</template>

<script>
//	这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json文件，图片文件等等）
//	例如：import 《组件名称》 from '《组件路径》';
import echarts from 'echarts'; // 引入 ECharts 库
import $ from 'jquery'; // 引入 jQuery 库
export default {
  //	import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //	这里存放数据
    return {
      geoCoordMap: {
        江苏: [118.8062, 31.9208],
        黑龙江: [127.9688, 45.368],
        内蒙古: [110.3467, 41.4899],
        吉林: [125.8154, 44.2584],
        北京: [116.4551, 40.2539],
        辽宁: [123.1238, 42.1216],
        河北: [114.4995, 38.1006],
        天津: [117.4219, 39.4189],
        山西: [112.3352, 37.9413],
        陕西: [109.1162, 34.2004],
        甘肃: [103.5901, 36.3043],
        宁夏: [106.3586, 38.1775],
        青海: [101.4038, 36.8207],
        新疆: [87.9236, 43.5883],
        四川: [103.9526, 30.7617],
        重庆: [108.384366, 30.439702],
        山东: [117.1582, 36.8701],
        河南: [113.4668, 34.6234],
        安徽: [117.29, 32.0581],
        湖北: [114.3896, 30.6628],
        浙江: [119.5313, 29.8773],
        福建: [119.4543, 25.9222],
        江西: [116.0046, 28.6633],
        湖南: [113.0823, 28.2568],
        贵州: [106.6992, 26.7682],
        云南: [102.9199, 25.4663],
        广东: [113.12244, 23.009505],
        广西: [108.479, 23.1152],
        海南: [110.3893, 19.8516],
        上海: [121.4648, 31.2891],
        西藏: [91.11, 29.97],
      },
      geoGpsMap: [121.4648, 31.2891],
      total: [8736, 8837, 8609, 9702, 11920],
      year : [2019,2020,2021,2022,2023]
    };
  },
  //	计算属性 类似于 data 概念
  computed: {},
  //	监控 data 中的数据变化
  watch: {},
  //	方法集合
  methods: {},
  //	生命周期 - 创建完成（可以访问当前 this 实例）
  created() {},
  //	生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {
    // 初始化 ECharts 实例
    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);

    var uploadedDataURL =
      "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json";
    var geoGpsMap = this.geoGpsMap;
    var t = 1;
    var r = 1;
    //所有地点坐标
    var geoCoordMap = this.geoCoordMap;

    var d1 = {
      广东: 1589,
      浙江: 983,
      北京: 708,
      江苏: 670,
      湖南: 612,
      安徽: 593,
      上海: 539,
      天津: 534,
      山东: 510,
      辽宁: 454,
      宁夏: 433,
      河南: 249,
      湖北: 234,
      福建: 211,
      广西: 231,
      青海: 222,
      吉林: 182,
      黑龙江: 159,
      陕西: 143,
      四川: 122,
      重庆: 120,
      山西: 112,
      贵州: 98,
      河北: 89,
      江西: 74,
      海南: 65,
      云南: 58,
      甘肃: 23,
      新疆: 14,
      内蒙古: 11,
      西藏: 10,
    };
    var d2 = {
      广东: 820,
      浙江: 983,
      北京: 728,
      江苏: 580,
      湖南: 232,
      安徽: 593,
      上海: 680,
      天津: 1589,
      山东: 510,
      辽宁: 272,
      宁夏: 432,
      河南: 249,
      湖北: 254,
      福建: 211,
      广西: 231,
      青海: 222,
      吉林: 733,
      黑龙江: 159,
      陕西: 68,
      四川: 27,
      重庆: 90,
      山西: 112,
      贵州: 98,
      河北: 89,
      江西: 160,
      海南: 20,
      云南: 58,
      甘肃: 20,
      新疆: 14,
      内蒙古: 0,
      西藏: 10,
    };
    var d3 = {
      广东: 500,
      浙江: 383,
      北京: 728,
      江苏: 580,
      湖南: 290,
      安徽: 90,
      上海: 286,
      天津: 900,
      山东: 30,
      辽宁: 490,
      宁夏: 276,
      河南: 249,
      湖北: 56,
      福建: 43,
      广西: 69,
      青海: 49,
      吉林: 38,
      黑龙江: 22,
      陕西: 568,
      四川: 727,
      重庆: 90,
      山西: 312,
      贵州: 98,
      河北: 89,
      江西: 160,
      海南: 20,
      云南: 58,
      甘肃: 110,
      新疆: 14,
      内蒙古: 10,
      西藏: 10,
    };
    var d4 = {
      广东: 500,
      浙江: 485,
      北京: 448,
      江苏: 795,
      湖南: 496,
      安徽: 290,
      上海: 286,
      天津: 247,
      山东: 405,
      辽宁: 490,
      宁夏: 177,
      河南: 540,
      湖北: 56,
      福建: 643,
      广西: 469,
      青海: 49,
      吉林: 38,
      黑龙江: 22,
      陕西: 68,
      四川: 27,
      重庆: 180,
      山西: 412,
      贵州: 98,
      河北: 89,
      江西: 160,
      海南: 120,
      云南: 58,
      甘肃: 40,
      新疆: 524,
      内蒙古: 120,
      西藏: 10,
    };
    var d5 = {
      广东: 580,
      浙江: 385,
      北京: 138,
      江苏: 395,
      湖南: 432,
      安徽: 194,
      上海: 580,
      天津: 873,
      山东: 405,
      辽宁: 490,
      宁夏: 177,
      河南: 340,
      湖北: 190,
      福建: 43,
      广西: 269,
      青海: 549,
      吉林: 38,
      黑龙江: 322,
      陕西: 68,
      四川: 27,
      重庆: 780,
      山西: 37,
      贵州: 698,
      河北: 75,
      江西: 35,
      海南: 220,
      云南: 58,
      甘肃: 345,
      新疆: 14,
      内蒙古: 10,
      西藏: 10,
    };
    var total = this.total;

    var colors = [
      "#1DE9B6",
      "#EEDD78",
      "#FFFF00",
      "#FFDB5C",
      "#37A2DA",
      "#04B9FF",
    ];
    var colorIndex = 0;
    $(function () {
      var year = ["2019", "2020", "2021", "2022", "2023"];
      var mapData = [[], [], [], [], []];

      /*柱子Y名称*/
      var categoryData = [];
      var barData = [];

      for (var key in geoCoordMap) {
        mapData[0].push({
          year: "2019",
          name: key,
          value: d1[key] / 25,
          value1: d1[key] / 10,
        });
        mapData[1].push({
          year: "2020",
          name: key,
          value: d2[key] / 25,
          value1: d2[key] / 10,
        });
        mapData[2].push({
          year: "2021",
          name: key,
          value: d3[key] / 25,
          value1: d3[key] / 10,
        });
        mapData[3].push({
          year: "2022",
          name: key,
          value: d4[key] / 25,
          value1: d4[key] / 10,
        });
        mapData[4].push({
          year: "2023",
          name: key,
          value: d5[key] / 25,
          value1: d5[key] / 10,
        });
      }

      for (var i = 0; i < mapData.length; i++) {
        mapData[i].sort(function sortNumber(a, b) {
          return a.value - b.value;
        });
        barData.push([]);
        categoryData.push([]);
        for (var j = 0; j < mapData[i].length; j++) {
          barData[i].push(mapData[i][j].value1 * 10);
          categoryData[i].push(mapData[i][j].name);
        }
      }

      $.getJSON(uploadedDataURL, function (geoJson) {
        $("body").css({
          //"C:\Users\HP\Downloads\isqqw.com-id=15371.png"
          background:
            "url(C:/Users/HP/Downloads/isqqw.com-id=15371.png) repeat-y", //'#2a6d87',
          position: "fixed",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%",
        });

        echarts.registerMap("china", geoJson);
        var convertData = function (data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value),
              });
            }
          }
          return res;
        };

        var convertToLineData = function (data, gps) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var toCoord = geoCoordMap[dataItem.name];
            var fromCoord = gps;
            if (fromCoord && toCoord) {
              if (t == 1) {
                res.push([
                  {
                    coord: toCoord,
                  },
                  {
                    coord: fromCoord,
                    value: dataItem.value,
                  },
                ]);
              } else {
                res.push([
                  {
                    coord: fromCoord,
                    value: dataItem.value,
                  },
                  {
                    coord: toCoord,
                  },
                ]);
              }
            }
          }
          if (t == 0) {
            t = 1;
          } else {
            t = 0;
          }
          return res;
        };

        var optionXyMap01 = {
          timeline: {
            data: year,
            axisType: "category",
            autoPlay: true,
            playInterval: 1500, //时间间隔
            left: "8%",
            right: "10%",
            bottom: "3%",
            width: "60%",
            label: {
              normal: {
                textStyle: {
                  color: "#ddd",
                },
              },
              emphasis: {
                textStyle: {
                  color: "#fff",
                },
              },
            },
            symbolSize: 10,
            lineStyle: {
              color: "#FFFFFF",
            },
            checkpointStyle: {
              borderColor: "#FFFFFF",
              borderWidth: 2,
            },
            controlStyle: {
              showNextBtn: true,
              showPrevBtn: true,
              normal: {
                color: "#666",
                borderColor: "#666",
              },
              emphasis: {
                color: "#FFFFFF",
                borderColor: "#aaa",
              },
            },
          },
          baseOption: {
            animation: true,
            animationDuration: 1000,
            animationEasing: "cubicInOut",
            animationDurationUpdate: 1000,
            animationEasingUpdate: "cubicInOut",
            grid: {
              right: "2%",
              top: "10%",
              bottom: "10%",
              width: "18%",
            },
            tooltip: {
              trigger: "axis", // hover触发器
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                shadowStyle: {
                  color: "rgba(150,150,150,0.1)", //hover颜色
                },
              },
            },
            visualMap: {
              min: 0,
              max: 650,
              left: "left",
              top: "bottom",
              text: ["高", "低"],
              textStyle: {
                color: "white",
              },
              calculable: true,
              colorLightness: [0.8, 100],
              color: ["#c05050", "#e5cf0d", "#5ab1ef"],
              dimension: 0,
              seriesIndex: 3, // 仅使第一个series生效
            },
            geo: {
              show: true,
              map: "china",
              roam: true,
              zoom: 1,
              center: [113.83531246, 34.0267395887],
              label: {
                emphasis: {
                  show: true,
                },
              },
              itemStyle: {
                normal: {
                  borderColor: "rgba(147, 235, 248, 1)",
                  borderWidth: 1,
                  areaColor: {
                    type: "radial",
                    x: 0.4,
                    y: 0.5,
                    r: 0.8,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(3, 0, 38,9)", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "rgba(3, 0, 38,9)", // 100% 处的颜色
                      },
                    ],
                    globalCoord: false, // 缺省为 false
                  },
                  shadowColor: "rgba(128, 217, 248, 9)",
                  // shadowColor: 'rgba(255, 255, 255, 1)',
                  shadowOffsetX: -2,
                  shadowOffsetY: 2,
                  shadowBlur: 10,
                },
                emphasis: {
                  areaColor: "#FCFFD9",
                  borderWidth: 0,
                },
              },
            },
          },
          options: [],
        };

        for (var n = 0; n < year.length; n++) {
          var statistic_name = "城市分布占比";
          optionXyMap01.options.push({
            backgroundColor: "#012248",

            title: [
              {
                text: "2019-2023年 / 毕业生分布情况",
                left: "center",
                top: "5%",
                textStyle: {
                  color: "#fff",
                  fontSize: 22,
                },
              },

              {
                id: "statistic",
                text: statistic_name,
                left: "87%",
                top: "5%",
                textStyle: {
                  color: "#fff",
                  fontSize: 15,
                },
              },
              {
                text: year[n] + "年毕业生数：" + total[n] + "人",
                left: "center",
                top: "10%",
                textStyle: {
                  color: "#FFAC50",
                  fontSize: 16,
                },
              },
            ],
            grid: {
              right: 70,
              top: 90,
              bottom: 30,
              width: "220",
            },
            xAxis: {
              type: "value",
              scale: true,
              position: "top",
              min: 0,
              boundaryGap: false,
              splitLine: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                margin: 1,
                textStyle: {
                  color: "#aaa",
                },
              },
            },
            yAxis: {
              type: "category",
              nameGap: 16,
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#ddd",
                },
              },
              axisTick: {
                show: false,
                lineStyle: {
                  color: "#ddd",
                },
              },
              axisLabel: {
                interval: 0,
                textStyle: {
                  color: "#ddd",
                },
              },
              data: categoryData[n],
            },

            series: [
              {
                //文字和标志
                name: "light",
                type: "scatter",
                coordinateSystem: "geo",
                data: convertData(mapData[n]),
                symbolSize: function (val) {
                  return val[2] / 5;
                },
                label: {
                  normal: {
                    formatter: "{b}",
                    position: "right",
                    show: true,
                  },
                  emphasis: {
                    show: true,
                  },
                },
                itemStyle: {
                  normal: {
                    color: colors[1],
                  },
                },
              },
              //地图？
              {
                type: "map",
                map: "china",
                geoIndex: 0,
                aspectScale: 0.75, //长宽比
                showLegendSymbol: false, // 存在legend时显示
                label: {
                  normal: {
                    show: false,
                  },
                  emphasis: {
                    show: false,
                    textStyle: {
                      color: "#fff",
                    },
                  },
                },
                roam: true,
                itemStyle: {
                  normal: {
                    areaColor: "#031525",
                    borderColor: "#FFFFFF",
                  },
                  emphasis: {
                    areaColor: "#2B91B7",
                  },
                },
                animation: false,
                data: mapData,
              },
              //地图点的动画效果
              {
                //  name: 'Top 5',
                type: "effectScatter",
                coordinateSystem: "geo",
                data: convertData(
                  mapData[n]
                    .sort(function (a, b) {
                      return b.value - a.value;
                    })
                    .slice(0, 20)
                ),
                symbolSize: function (val) {
                  return val[2] / 2;
                },
                showEffectOn: "render",
                rippleEffect: {
                  brushType: "stroke",
                },
                hoverAnimation: true,
                label: {
                  normal: {
                    formatter: "{b}",
                    position: "right",
                    show: true,
                  },
                },
                itemStyle: {
                  normal: {
                    color: colors[1],
                    shadowBlur: 100,
                    shadowColor: colors[1],
                  },
                },
                zlevel: 1,
              },
              //地图线的动画效果

              //柱状图
              {
                zlevel: 1.5,
                type: "bar",
                barMaxWidth: 8,
                symbol: "none",
                itemStyle: {
                  normal: {
                    color: colors[n],
                    barBorderRadius: [0, 30, 30, 0],
                  },
                },
                data: barData[n],
              },
            ],
          });
          if (r == 0) {
            r = 1;
          } else {
            r = 0;
          }
        }
        myChart.setOption(optionXyMap01);
      });
    });
  },
  beforeCreate() {}, //	生命周期 - 创建之前
  beforeMount() {}, //	生命周期 - 挂载之前
  beforeUpdate() {}, //	生命周期 - 更新之前
  updated() {}, //	生命周期 - 更新之后
  beforeDestroy() {}, //	生命周期 - 销毁之前
  destroyed() {}, //	生命周期 - 销毁完成
  activated() {}, //	如果页面有 keep-alive 缓存功能，这个函数会触发
};
</script>
<style scoped></style>
